<template>
  <div class="hotel" style="overflow: hidden">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>酒店</el-breadcrumb-item>
      <el-breadcrumb-item>{{ city }}酒店预订</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  选择城市  -->
    <hotel-select />

    <!-- 城市景点 -->
    <el-row>
      <el-col :span="14">
        <hotel-score :scenics="scenics" />
      </el-col>
      <el-col :span="10" class="map-wrapper">
        <div id="map"></div>
        <div class="map-loading" :class="{ mask }" v-if="loading">
          <img src="../../assets/images/loading.svg" alt="" />
        </div>
      </el-col>
    </el-row>

    <!-- 筛选器 -->
    <hotel-filter />

    <!-- 酒店列表 -->
    <div v-if="!loading" ref="hotelList">
      <div v-if="hotelList.length > 0">
        <hotel-item v-for="item of hotelList" :hotel="item" :key="item.id" />
      </div>
      <div v-else class="noData">暂无符合条件的酒店</div>
    </div>
    <div v-else class="hotel-loading">
      <img src="../../assets/images/loading.svg" alt="" />
    </div>
    <el-pagination
      style="float: right"
      next-text="下一页"
      prev-text="上一页"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Hotel",
  data() {
    return {
      scenics: [],
      mask: false, // 用来控制地图loading遮罩层的出现时间
      loading: false,
      city: "",
      hotelList: [],
      total: 0,
    };
  },
  watch: {
    $route: {
      handler() {
        if (this.$route.path === "/hotel") {
          this.loading = true;
          this.$axios
            .get("/cities?name=" + this.$route.query.city)
            .then((res) => {
              const cityData = res.data.data[0];
              this.scenics = cityData.scenics;
              this.city = this.$route.query.city;
              this.$route.query.city = cityData.id;
              this.getHotelData(this.$route.query);
            });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    window.onLoad = () => {
      AMap.plugin("AMap.CitySearch", () => {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity((status, result) => {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            this.city = result.city;
            this.$router.push("/hotel?city=" + result.city);
            this.$confirm("您当前定位的城市是" + result.city, "提示", {
              confirmButtonText: "确定",
              type: "success",
            });
          }
        });
      });
    };
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=226aa2fa93166c4329ac743211fcce08&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
  methods: {
    handleCurrentChange(page) {
      this.loading = true;
      this.$axios
        .get("/hotels?city=" + this.$route.query.city, {
          params: {
            _start: (page - 1) * 10,
          },
        })
        .then((res) => {
          this.hotelList = res.data.data;
          this.loading = false;
          this.$nextTick(() => {
            window.scrollTo(0, this.$refs.hotelList.offsetTop);
          });
        });
    },
    getHotelData(params) {
      let url = "";
      Object.keys(params).forEach((key) => {
        if (Array.isArray(params[key])) {
          params[key].forEach((item) => {
            url += `${key}=${item}&`;
          });
        } else {
          url += `${key}=${params[key]}&`;
        }
      });
      // console.log(url);
      this.$axios.get("/hotels?" + url).then((res) => {
        if (res.data.data.length === 0) {
          this.loading = false;
          this.hotelList = [];
          return;
        }
        this.total = res.data.total;
        const hotelList = res.data.data;
        this.hotelList = hotelList;
        this.loading = false;
        this.$nextTick(() => {
          var map = new AMap.Map("map", {
            center: [
              hotelList[0].location.longitude,
              hotelList[0].location.latitude,
            ],
          });
          let markerList = [];
          hotelList.forEach((item) => {
            var marker = new AMap.Marker({
              position: [item.location.longitude, item.location.latitude],
              title: item.name,
            });
            markerList.push(marker);
          });
          map.add(markerList);
          map.on("complete", function () {
            map.setZoom(10);
          });
          this.mask = true;
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
.hotel {
  width: 1000px;
  margin: 20px auto;
  .map-wrapper {
    position: relative;
    #map {
      width: 100%;
      height: 260px;
    }
    .mask {
      background: rgba(0, 0, 0, 0.2);
    }
    .map-loading {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 260px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
  .hotel-loading {
    text-align: center;
    img {
      width: 200px;
      height: 200px;
    }
  }
  .noData {
    text-align: center;
  }
}
</style>
